<template>
	<el-card shadow="never">
		<template #header>
			{{ title }}
			<el-radio-group v-model="day" size="small" class="float-right" is-button @change="handleRadioChange">
				<el-radio-button :label="1">今</el-radio-button>
				<el-radio-button :label="-1">昨</el-radio-button>
				<el-radio-button :label="7">周</el-radio-button>
				<el-radio-button :label="30">月</el-radio-button>
			</el-radio-group>
		</template>
		<echart width="100%" height="254px" :options="option" @echartClick="callbackFun" />
	</el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { workbenchChart } from '/@/api/workbench';

const props = defineProps({
	title: {
		type: String,
		default: '用户统计',
	},
	data: {
		type: Object,
		default: () => ({}),
	},
});

const day = ref(1);

const option = reactive({
	tooltip: {},
	grid: {
		left: '0',
		right: '0',
		bottom: '0',
		containLabel: true,
	},
	xAxis: {
		data: props.data?.user_chart?.days,
	},
	yAxis: {},
	series: [
		{
			type: 'bar',
			data: props.data?.user_chart?.data,
			barMaxWidth: 45,
		},
	],
});

const getData = async () => {
	const res = await workbenchChart({ day: day.value });
	option.xAxis.data = res.user_chart_data.days;
	option.series[0].data = res.user_chart_data.data;
};

const handleRadioChange = (val) => {
	getData();
};

const callbackFun = (obj) => {
	console.log('用户图表回调', obj);
};

onMounted(() => {});
</script>

<style lang="scss" scoped></style>
